<template>
  <el-card class="card" ref="card">
    <div ref="div">
      <el-form ref="form">
        <el-row :gutter="24">
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item label="用户名">
              <el-input v-model="formData.username" clearable placeholder="请输入用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xl="5" :lg="6" :md="7" :sm="8" :xs="24">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-loading="loading">
      <el-scrollbar>
        <el-table :data="tableData" border :height="height">
          <el-table-column prop="username" label="用户名" align="center" min-width="100"></el-table-column>
          <el-table-column prop="phone" label="手机号" align="center" min-width="120"></el-table-column>
          <el-table-column prop="invitation_code" label="邀请码" align="center" min-width="100"></el-table-column>
        </el-table>
      </el-scrollbar>
      <Pagination
          :total="pagination.total"
          v-model:current="pagination.current"
          v-model:pageSize="pagination.pageSize"
          @change="handlePaginationChange"
      ></Pagination>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "User"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue"
import {systemUserList} from '@/api/system.user'
import { SystemUserListQueryFormType } from '@/type/system.user.type'
import Pagination from '@/components/Pagination.vue'
import {useCardHeight} from '@/hooks/useCardHeight'

const {
    card,
    height,
    form,
    div
} = useCardHeight()

const loading = ref<boolean>(false)

const tableData = ref([])

const formData = reactive<SystemUserListQueryFormType>({
  username: ""
})

const pagination = reactive<{
  pageSize: number
  current: number
  total: number
}>({
  pageSize: 10,
  current: 1,
  total: 0
})

const getList = () => {
  loading.value = true
  tableData.value = []
  systemUserList({
    pageSize: pagination.pageSize,
    current: pagination.current,
    data: {
      username: formData.username
    }
  }).then(res => {
    if (res.code === 200) {
      tableData.value = res.data.list
      pagination.total = res.data.total
      pagination.current = res.data.current
      pagination.pageSize = res.data.pageSize
    }
  }).finally(() => {
    loading.value = false
  })
}

const handleSearch = () => {
  pagination.current = 1
  pagination.pageSize = 10
  getList()
}

const handleReset = () => {
  formData.username = ""
  pagination.current = 1
  pagination.pageSize = 10
  getList()
}

const handlePaginationChange = () => {
  getList()
}

onMounted( () => {
  getList()
} )
</script>

<style scoped lang="scss">

</style>
